import React, { useState,useEffect } from 'react';
import { Form, DatePicker, TimePicker, Button, Input, Select, Descriptions, Radio } from 'antd';
import { TreeSelect, Upload } from 'antd';
import { Mentions } from 'antd';
import { history } from 'umi'
import moment from 'moment';
import './addLeave.css';
import request from '../../../http';

// 冯小建--学生-新增请假
const { RangePicker } = DatePicker;
const { Option } = Select;

const formItemLayout = {
    labelCol: {
        // xs: { span: 24 },
        // sm: { span: 8 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
    },
};
// 学生信息布局
const messItemLayout = {

};
const config = {
    rules: [{ type: 'object' as const, required: true, message: 'Please select time!' }],
};
const rangeConfig = {
    rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],
};

// 审批状态
const { TreeNode } = TreeSelect;




const addLeave = () => {
    //学生信息
    const [studentInfo,setStudentInfo] = useState({});

    const [value, setValue] = useState(undefined);
    const onChange = () => {
        setValue(value);
    };

    const [form] = Form.useForm();

    // 上传附件
    const normFile = (e: any) => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    };

    // 提交
    const onFinish = (fieldsValue: any) => {
        // 获取当前时间
        const curDate = moment(Date.now()).format('YYYY-MM-DD HH:mm:ss')  
        // Should format date value before submit.
        const rangeValue = fieldsValue['range-picker'];
        const values = {
            ...fieldsValue,
            // 'range-picker': [
            //     rangeValue[0].format('YYYY-MM-DD HH:mm:ss'),
            //     rangeValue[1].format('YYYY-MM-DD HH:mm:ss'),
            // ],
            'startDateTime': rangeValue[0].format('YYYY-MM-DD HH:mm:ss'),
            'endDateTime': rangeValue[1].format('YYYY-MM-DD HH:mm:ss'),
            'submissionDate': curDate,
            'approval': studentInfo.userT,
        };
        console.log('Received values of form: ', values);
        //调用新增接口
        addLeaves(values);
    };

    // 时间选择
    //时间
const range = (start, end) =>{
    const result = [];
    for (let i = start; i < end; i++) {
      result.push(i);
    }
    return result;
  }

  const disabledDate = (current) => {
    // Can not select days before today and today
    return current && current < moment().endOf('day');
  }
 const disabledRangeTime =(_, type) => {
    if (type === 'start') {
      return {
        disabledHours: () => range(0, 60).splice(4, 20),
        disabledMinutes: () => range(30, 60),
        disabledSeconds: () => [55, 56],
      };
    }
    return {
      disabledHours: () => range(0, 60).splice(20, 4),
      disabledMinutes: () => range(0, 31),
      disabledSeconds: () => [55, 56],
    };
  }

  // 获取学生信息
  const getStudentInfo = ()=>{
    console.log("执行 请求查询学生信息接口");
    request 
      .post('/api/PersonalInfo/student/lookStuInformation')
      .then( (response) =>{
        console.log("执行了",response)
            setStudentInfo(response)
      })
      .catch( (error)=>{
        console.log(error);
      })
  };

  //新增请假接口
  const addLeaves = (value)=>{
    console.log("执行 新增请假接口");
    const token = sessionStorage.getItem("apiKey")
    console.log(studentInfo.account);
    request 
      .post('/api/ack/student/addLeave',{
        endDateTime: value.endDateTime,
        explain: value.explain,
        id: 0,
        reason: parseInt(value.reason),
        startDateTime: value.startDateTime,
        state: 0,
        studentId: studentInfo.account,
        submissionDate: value.submissionDate,
        theme: value.theme
      },{
          headers : {
            "Authorization":token
          }
        })
      .then( (response) =>{
        console.log("执行了",response)
      })
      .catch( (error)=>{
        console.log(error);
      })
  }

  useEffect(() => {
    getStudentInfo();
  }, [])


    return (
        <div style={{ paddingLeft: '2%' }}>
            {/* 新增请假*/}
            <div>
                {/* 学生信息 */}
                <div style={{ marginBottom: '20px' }}>
                    <Descriptions title="学生信息" column={{ xs: 3, sm: 4, md: 4 }} >
                        <Descriptions.Item label="姓名">{studentInfo.userName}</Descriptions.Item>
                        <Descriptions.Item label="学号">{studentInfo.account}</Descriptions.Item>
                        <Descriptions.Item label="院系">{studentInfo.dkey}</Descriptions.Item>
                        <Descriptions.Item label="专业">{studentInfo.gkey}</Descriptions.Item>
                        <Descriptions.Item label="年级"> {studentInfo.gradekey}</Descriptions.Item>
                        <Descriptions.Item label="班级">{studentInfo.classinfoid ? studentInfo.classinfoid:'/'}</Descriptions.Item>
                        <Descriptions.Item label="班主任">{studentInfo.userT}</Descriptions.Item>
                    </Descriptions>
                </div>

                {/* 请假表单 */}
                <Form form={form} name="time_related_controls" className='absence-form' {...formItemLayout} onFinish={onFinish}>

                    <div style={{ width: '80%' }}>
                        <Form.Item label="主 题：" name="theme" style={{ width: '94%' }} rules={[{ required: true }]}>
                            <Input placeholder='事例：【陈XX】因病请假1天' />
                        </Form.Item>
                    </div>

                    <div style={{ width: '100%' }}>
                        {/* 时间选择 */}
                        <Form.Item name="range-picker" label="申请提交日期：" {...rangeConfig}  >
                            {/* <RangePicker style={{ width: '60%', marginLeft: '0' }} /> */}
                            <RangePicker
                                disabledDate={disabledDate}
                                disabledTime={disabledRangeTime}
                                showTime={{
                                    hideDisabledOptions: true,
                                    defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('00:00:00', 'HH:mm:ss')],
                                }}
                                format="YYYY-MM-DD HH:mm:ss"
                            />
                        </Form.Item>
                    </div>

                    <div style={{ width: '100%' }}>
                        {/* 请假原因 */}
                        <Form.Item name="reason" label="请假原因" rules={[{ required: true }]} >
                            <Radio.Group>
                                <Radio value="1">事假</Radio>
                                <Radio value="0">病假(需附校医院证明)</Radio>
                                <Radio value="2">其他</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </div>

                    <div style={{ width: '100%' }}>
                        {/* 详细原因 */}
                        <Form.Item name="explain" style={{ width: '94%' }} >
                            <Input.TextArea style={{ height: '100px' }} placeholder='请输入请假具体原因' />
                        </Form.Item>
                    </div>

                    {/* 上传附件 */}
                    <Form.Item
                        name="upload"
                        label="相关附件"
                        valuePropName="fileList"
                        getValueFromEvent={normFile}
                        extra="例如：校医证明.png"
                    >
                        <Upload name="logo" action="/upload.do" listType="picture">
                            <Button className='ant-btn ant-btn-primary addLeave' >上传附件</Button>
                        </Upload>
                    </Form.Item>

                    <div style={{ width: '100%' }}>
                        {/* 审批人 */}
                        <Form.Item style={{ width: '20%' }}
                            
                            name="approval"
                            label="审批人">
                            
                            <Input placeholder={studentInfo.userT} value={studentInfo.userT} disabled />
                        </Form.Item>
                    </div>


                    <div style={{ width: '100%' }}>
                        {/* 按钮 */}
                        <Form.Item
                            wrapperCol={{
                                // xs: { span: 24, offset: 0 },
                                // sm: { span: 16, offset: 8 },
                            }}>
                            <Button type="primary" htmlType="submit">确认提交</Button>
                            <Button htmlType="button" onClick={() => history.push('/student/absence/index')} style={{ marginLeft: '2%' }}>取消</Button>
                        </Form.Item>
                    </div>


                </Form>


            </div>

        </div>
    );
};

export default addLeave;
